import React from 'react'
import PropTypes from 'prop-types';
import { List, InputItem, Button, Modal, Picker, Toast } from 'antd-mobile'
import CommonHeader from 'COMPONENT/CommonHeader';
import {getUrlParams} from 'UTIL/commonUtil';
import './index.less'
import bank from '../../../assets/js/bank.js'
// ========================================
const Item = List.Item;
// ========================================
class Mine extends React.Component {
    static contextTypes = {
        router: PropTypes.object.isRequired
    };
    constructor (props) {
        super(props);
        this.state = {
            btnChecked: '0',
            ctype: '',
            moneyType: ['0'],
            moneyBank: ['110000', '1100011', '0033'],
            phone: '13892004878',
            codeTxt: '获取验证码',
            codeTimes: 0,
            codeModal: false
        };
    }
    componentWillMount () {
        let urlParams = getUrlParams();
        let ctype = urlParams['ctype'];
        if (ctype) {
            this.setState({
                ctype: ctype
            });
        }
    }
    radioToggleAction = () => {
        let checked = this.state.btnChecked;
        if (checked === '1') {
            this.setState({
                btnChecked: '0',
                codeModal: false
            })
        } else {
            this.setState({
                btnChecked: '1'
            })
        }
    };
    closeModalFun = (modal) => {
        this.setState({
            [modal]: false
        });
    };
    // 获取验证码
    getCodeFun = () => {
        let that = this;
        let phone = this.state.phone;
        // console.log(this.state, this.state.codeTxt);
        if (!phone) {
            Toast.fail('请填写移动电话号码。', 1);
        } else if (isNaN(phone) || (phone.length !== 11)) {
            Toast.fail('移动电话号码格式不正确，请重新填写。', 1);
        } else {
            if (that.state.codeTimes === 0) {
                let number = 61;
                let timer = setInterval(function(){
                    number --;
                    that.setState({
                        codeTxt: number + 's后重新获取',
                        codeTimes: 1
                    });
                    if (number <= 0) {
                        clearInterval(timer);
                        timer = null;
                        that.setState({
                            codeTxt: '获取验证码',
                            codeTimes: 0
                        });
                    }
                }, 1000)
            }
        }
    };
    render() {
        let that = this;
        let iconChecked = this.state.btnChecked === '1' ? 'icon_radio_checked' : 'icon_circle';
        let pickers = {
            'moneyType': [
                { label: '个人二手住房购置贷款', value: '0', title: '贷款类型' }
            ],
            'moneyBank': bank
        };
        let pickerArr = [];
        for (let key1 in pickers) {
            (function (key) {
                var arr = pickers[key];
                pickerArr.push(
                    <Picker data={ arr } cols={key === 'moneyType' ? 1 : 3}
                            value={that.state[key]}
                            onChange={v => {that.setState({ [key]: v });}}
                            onOk={v => that.setState({ [key]: v })}
                    >
                        <Item arrow="horizontal">{key === 'moneyType' ? arr[0].title : '贷款服务行'}</Item>
                    </Picker>
                );
            })(key1);
        }
        let inputs = {
            // 'moneyType': { title: '贷款类型', placeholder: '贷款类型', initValue: '个人二手住房购置贷款' },
            // 'moneyBank': { title: '贷款服务行', placeholder: '贷款服务行', initValue: '湖北省分行香港路支行' },
            'varname': { title: '姓名', placeholder: '姓名', initValue: '张三' },
            'idcard': { title: '身份证号码', placeholder: '身份证号码', initValue: '300928377495770098' },
            'cardnumber': { title: '交行卡号', placeholder: '交行卡号', initValue: '' },
            'phone': { title: '移动电话', placeholder: '移动电话', initValue: '13892004878' },
            'code': { title: '短信验证码', placeholder: '短信验证码', initValue: '' }
        };
        let inputArr = [];
        for (var key in inputs) {
            // console.log(key, inputs[key].initValue);
            (function (key) {
                if (key !== 'phone') {
                    inputArr.push(
                        <InputItem clear placeholder={inputs[key].placeholder}
                                   defaultValue={inputs[key].initValue}
                                   onChange={ val => {that.setState({[key]: val})} }>
                            {inputs[key].title}
                        </InputItem>
                    );
                } else {
                    inputArr.push(
                        <div style={{position: 'relative'}}>
                            <InputItem clear placeholder={inputs[key].placeholder}
                                       defaultValue={inputs[key].initValue}
                                       value={that.state[key]}
                                       onChange={ val => {that.setState({[key]: val})} }>
                                {inputs[key].title}
                            </InputItem>
                            <Button type="primary" inline size="small" className="credit-code"
                                    onClick={that.getCodeFun}>
                                {that.state.codeTxt}
                            </Button>
                        </div>
                    );
                }
            })(key);
        }
        return (
            <div id="credit">
                <CommonHeader
                    name={!this.state.ctype ? '个人征信查询和使用授权' : '个人房屋查询和使用授权'}
                    leftContentTitle="@back"
                />
                <div style={{paddingTop: '50px'}}></div>
                <List>
                    {pickerArr}
                    {inputArr}
                </List>
                <div className="agree_section" onClick={this.radioToggleAction.bind(this)}>
                    <div style={{
                        width: '.4rem',
                        height: '.4rem',
                        marginTop: '.1rem',
                        marginRight: '.1rem',
                        background: 'url(./imgs/' + iconChecked + '.png) no-repeat center/100%'
                    }}>

                    </div>
                    <div className="agreeText">
                        我已阅读并同意
                        <a className="agreeText fontBlue" onClick={(e) => {
                            e.preventDefault();
                            that.context.router.push({
                                pathname: '/Mine/Agreement',
                                state: {
                                    ctype: that.state.ctype
                                }
                            });
                        }}>
                        {
                            !this.state.ctype ? '《个人征信查询和使用授权委托书》' : '《个人房屋查询和使用授权委托书》'
                        }
                        </a>
                    </div>
                </div>
                
                <div className="btnGroup-one">

			    	<Button type="primary"  className="btnGroup-one-btn"
                        onClick={()=>{
                            that.context.router.push({
                                pathname: '/Mine/CreditCode',
                                state: {
                                    ctype: that.state.ctype
                                }
                            });
                        }}
                        disabled={this.state.btnChecked === '1' ? false : true}
                        style={{
                            margin: '10px auto 0', width: '90%', borderRadius: '0'
                        }}>
                    提交
                </Button>
				</div>
                
                
                <Modal
                    visible={this.state.codeModal}
                    transparent
                    maskClosable={false}
                    onClose={this.closeModalFun.bind(this, 'codeModal')}
                    title={!that.state.ctype ? '个人征信查询和使用授权' : '个人房屋查询和使用授权'}
                    footer={[{ text: '返回', onPress: () => {
                        that.context.router.push({
                            pathname: '/Mine'
                        });
                    }}]}
                >
                    <div style={{ height: 50, overflow: 'scroll' }}>
                        {!that.state.ctype ? '征信授权编号：93939385' : '房查授权编号：93939385'}
                    </div>
                </Modal>
            </div>
        );
    }
}
// ========================================
export default Mine;